<template>
  <div>
    <div class="goods-box">
      <div class="goods-head">
        <div class="title">
          <span class="mui-icon mui-icon-search" v-show="showFlag=true"></span>
          <span class="mui-icon mui-icon-bars" v-show="showFlag?false:true"></span>
        </div>
      </div>
      <router-link class="item" v-for="item in itemDetail" :key="item.gid" :to="'/home/itemDetail/'+ item.gid" tag="div">
        <div class="imgBox">
          <img src alt>
        </div>
        <div class="wordBox">
          <div class="description">{{ item.description }}</div>
          <div class="price">
            <span>
              <sub>￥</sub>{{ item.price }}
            </span>
            <span>9999人已付款</span>
          </div>
        </div>
      </router-link>
    </div>
    <mt-button type="danger" size="large" plain>加载更多</mt-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: this.$route.params.id,
      goodsDetail: [
        {
          gid: "001001",
          goodsName: "XX品牌XX东西XX类型XX风格XXXX",
          price: "299",
          color: [
            { cid: "c001", cvalue: "黑色" },
            { cid: "c002", cvalue: "深蓝" },
            { cid: "c003", cvalue: "浅蓝" }
          ],
          size: [
            { sid: "s001", svalue: "28" },
            { sid: "s002", svalue: "29" },
            { sid: "s003", svalue: "30" },
            { sid: "s004", svalue: "31" },
            { sid: "s005", svalue: "32" },
            { sid: "s006", svalue: "33" },
            { sid: "s007", svalue: "34" },
            { sid: "s008", svalue: "35" },
            { sid: "s009", svalue: "36" }
          ],
          num: "1",
          description:
            "好东西，这东西真真是极好的，不买不知道，买了不吃亏，买了还想买，你要不要买，反正好多人买",
          origin_price: "599",
          stock: "199"
        },
        {
          gid: "001002",
          goodsName: "XX品牌YY东西YY类型YY风格YYY",
          price: "399",
          color: [
            { cid: "c001", cvalue: "黄色" },
            { cid: "c002", cvalue: "蓝色" },
            { cid: "c003", cvalue: "白色" }
          ],
          size: [
            { sid: "s001", svalue: "XS" },
            { sid: "s002", svalue: "S" },
            { sid: "s003", svalue: "M" },
            { sid: "s004", svalue: "L" },
            { sid: "s005", svalue: "XL" },
            { sid: "s006", svalue: "XXL" }
          ],
          num: "1",
          description:
            "好东西，这东西真真是极好的，不买不知道，买了不吃亏，买了还想买，你要不要买，反正好多人买",
          origin_price: "699",
          stock: "999"
        },
        {
          gid: "002001",
          goodsName: "ZZ品牌XX东西XX类型XX风格wwww",
          price: "499",
          color: [
            { cid: "c001", cvalue: "绿色" },
            { cid: "c002", cvalue: "粉色" },
            { cid: "c003", cvalue: "白色" }
          ],
          size: [
            { sid: "s001", svalue: "XS" },
            { sid: "s002", svalue: "S" },
            { sid: "s003", svalue: "M" },
            { sid: "s004", svalue: "L" },
            { sid: "s005", svalue: "XL" },
            { sid: "s006", svalue: "XXL" }
          ],
          num: "1",
          description:
            "好东西，这东西真真是极好的，不买不知道，买了不吃亏，买了还想买，你要不要买，反正好多人买",
          origin_price: "599",
          stock: "999"
        }
      ],
      itemDetail:[]
    };
  },
  created(){
    this.getTargetList()
  },
  methods: {
    getTargetList(){
      var res = this.goodsDetail;
      this.itemDetail = res
    },
  }
};
</script>

<style lang="scss" scoped>
body,
div,
img {
  padding: 0;
  margin: 0;
}
.goods-box {
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-flow: wrap;
  justify-content: space-between;
  margin: 10px 10px;
  // 手机上不能往上滑动=======================
  // overflow:scroll====有效
  overflow-y: auto;
  .goods-head {
    .title {
      span {
        position: fixed;
        right: 15px;
        top: 7px;
        z-index: 999;
        color: #fff;
      }
    }
    .mui-search {
      padding: 0 10px;
      input {
        background: #fff;
      }
    }
  }
  .item {
    flex: 48%;
    // flex-grow 设置元素占据剩余空间的份数
    flex-grow: 0;
    box-shadow: 0 3px 8px #ccc;
    border-radius: 10px;
    margin-bottom: 10px;
    
    .imgBox {
      height: 150px;
      width: 150px;
      background: skyblue;
      margin: 0;
      margin: 20px 0;
      img {
        vertical-align: middle;
      }
    }
    .wordBox {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        // height: 100%;
      .description {
        font-size: 14px;
        padding: 0 10px 10px;
      }
      .price {
        margin: 0 10px 10px;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        span:first-of-type {
          color: red;
        }
        span:last-of-type {
          color: #999;
        }
      }
    }
  }
}
</style>


   